<template>
  <div id="first">
         <!-- 头部标签 -->
 <header>
     <van-nav-bar
  title="新增客户信息"
  left-arrow
  @click-left="onClickLeft"
  
  @click-right="onClickRight"
>
  <template #right>
    <van-icon name="wap-home-o" size="18" />
  </template></van-nav-bar>
 </header>
 <!-- 内容 -->
 <div class="cent">
    
   <ul>
     <li> <p>*客户名称</p><i><input v-model="custName" type="text" ></i><span ></span></li>
     <li> <p>*联系方式</p><i><input v-model="telephone" type="text" ></i><span ></span></li>
     <li> <p>学历</p><i><input  v-model="education" type="text" ></i><span ></span></li>
     <li> <p>年龄</p><i><input  v-model="age" type="text" ></i><span ></span></li>
     <li> <p>性别</p><i><input  v-model="sex" type="text" ></i><span ></span></li>
     <li> <p>所属城市</p><i><input  v-model="cityName" type="text" ></i><span ></span></li>
     <li> <p>公司名称</p><i><input  v-model="company" type="text" ></i><span ></span></li>
     <li> <p>职务</p><i><input v-model="position" type="text" ></i><span ></span></li>


   </ul>
 </div>
 <!-- 按钮 -->
  <div class="bottom">
   <van-button color="#003399" round @click="save" >保存</van-button>
 </div>
 </div>
</template>

<script>
import {addCustmer} from '../../request/api'

export default {
data(){
    return{
        custName:'',
        cityName:'',
        company:'',
        position:'',
        telephone:'',
        education:'',
        sex:'',
        age:'',
    }
},
methods:{
     onClickLeft() {
      this.$router.push('/custmerList')
    },
    onClickRight(){
      this.$router.push('/login')
    },
    save(){
        addCustmer({"custName":this.custName,"cityName":this.cityName,"company":this.company,"position":this.position,"telephone":this.telephone,"education":this.education,"sex":"女","age":23}).then(res=>{
            console.log(res);
        })
    }
}
}
</script>

<style lang='less'>
*{
    font-size: .18rem!important;
}
header{
    background: #003399;
    .van-nav-bar{background:#003399;
font-size: .2rem;
padding:3% 0 0;
.van-nav-bar__title,.van-nav-bar__text{
    color: white;
    font-size: .2rem;
}
.van-icon{
    font-size: .3rem;
    color: white;
}
     }
    
}
.cent{
  background: white;
  margin: 0 0 4% 0 ;
  ul{
      .van-icon{
          vertical-align: center;
      } 
    margin: 0  5%;
     li{
         
    line-height: .45rem;
    display: flex;
    p{
        width: 30%;
    }
    i{
          width: 65%;
    }
    input{
      border: none;
    }
  }
  }
 
}
.bottom{
  
  position: absolute;
  width: 100%;
  bottom: .1rem;
  .van-button{
  margin: .1rem .15rem;
  width: 92%;
}
}
</style>